<!-- 商品拼团区组件 -->
<template>
  <div class="teams">
    <div class="top">
      <h1>拼团专区</h1>
      <span>拼着买更实惠</span>
      <span class="iconfont icon-right"></span>
    </div>
    <div class="bom">
      <div class="swiper-commodity comm">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="list in teamlistArr" :key="list.id">
            <div class="goods-top">
              <div class="top-img">
                <img :src="list.goods_thumb" alt="" />
              </div>
            </div>
            <div class="goods-bom">
              <div class="bom-name" v-text="list.goods_name"></div>
              <div class="bom-price">
                <img src="@/assets/image/06.png" alt="" />
                <div v-text="list.team_price_formated"></div>
              </div>
              <div class="bom-price">
                <div v-text="list.shop_price_formated"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Ajax from "@/api/Ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      teamlistArr: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getteamlist() {
      let result = await Ajax("/api/visual/visual_team_goods");
      this.teamlistArr = result.data;
    },
  },
  mounted() {
    this.getteamlist();
  },
};
</script>
<style lang="less">
.teams {
  width: 96%;
  background-color: #ffffff;
  border-radius: 1rem;
  margin: 1rem auto 0;

  .top {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1rem 1rem;

    &:after {
      position: absolute;
      content: " ";
      height: 1px;
      background-color: #eee;
      left: 1rem;
      right: 1rem;
      bottom: 0;
    }

    h1 {
      font-size: 1.8rem;
      color: #000;
      font-weight: 600;
      margin: 0 1rem 0 0.5rem;
    }

    span {
      color: #888;
      font-size: 1.2rem;
    }

    .icon-right {
      color: #f20d23;
      font-size: 1.4rem;
      font-weight: 600;
      margin: 0 0 0 5px;
    }
  }

  .bom {
    padding: 1.5rem 0 0 0.1rem;

    .comm {
      overflow-x: auto;

      .swiper-wrapper {
        display: flex;

        .swiper-slide {
          padding: 0 0.3rem;
          width: 12rem;

          .goods-top {
            position: relative;

            .top-img {
              width: 12rem;

              img {
                width: 100%;
              }
            }
          }

          .goods-bom {
            display: flex;
            flex-direction: column;
            padding: 1rem 0.8rem;

            .bom-name {
              height: 1.5rem;
              font-size: 13px;
              color: #000;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .bom-price {
              display: flex;
              margin-top: 5px;
              font-size: 15px;
              font-weight: 700;
              color: rgb(242, 14, 40);
              display: flex;
              justify-content: center;

              img {
                width: 1.6rem;
                height: 1.6rem;
                margin: 0 0.5rem 0 0;
                vertical-align: bottom;
              }

              &:last-child {
                font-size: 10.5px;
                font-weight: 500;
                color: rgb(136, 136, 136);
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>